<template>
  <div class="container">
    <Middle>
      <el-card class="article">
        <h1 class="article_title">{{ article.title }}</h1>
        <el-row class="article_small_title">
          <span>{{ article.create_time | timeFormat }}</span>
        </el-row>
        <el-row class="article_content" v-html="article.content"></el-row>
      </el-card>

      <Comments :article-id="articleId"></Comments
    ></Middle>
  </div>
</template>

<script>
import Comments from "@/views/front/comments/Comments.vue";
import "@/assets/css/quill-edit.css";
import { getUrlKey, timeFormat } from "@/utils/utils.js";
import { getArticleDetail } from "@/api/article";
import Middle from "@/views/layout/Middle";

export default {
  data() {
    return {
      articleId: this.$route.params.id,
      article: [],
      isRemember: false,
    };
  },
  components: {
    Comments,Middle
  },
  mounted() {
    this.getArticleDetail();
  },

  methods: {
    //获取文章
    async getArticleDetail() {
      let res;
      try {
        res = await getArticleDetail(this.articleId);
        console.log(res);
        this.article = res.data;
        this.article.desb = this.article.desb.split(" ");
      } catch (e) {
      } finally {
      }
    },
  },

  created() {},
  filters: {
    timeFormat,
  },
};
</script>

<style lang="less" scope>
.article {
  padding: 40px;

  .article_title {
    margin-top: 20px;
    text-align: center;
  }

  .article_small_title {
    text-align: center;
    margin-top: 20px;
    color: #666;

    .article_desb {
      margin-right: 20px;
    }
  }

  .article_content {
    line-height: 30px;
  }
}

.article {
  .article_title {
    text-align: center;
  }

  .article_small_title {
    text-align: center;
    margin-top: 20px;
    color: #666;

    .article_desb {
      margin-right: 20px;
    }
  }

  .article_content {
    line-height: 30px;
  }
}
</style>
